import React from 'react';
import {
  StatusBar, Text, View, StyleSheet, Platform
} from 'react-native';

import DeviceInfo from 'react-native-device-info';
// import PropTypes from 'prop-types';

import { colors } from '../../constants/theme';

const NAVBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 50;
const STATUS_BAR_HEIGHT = Platform.OS !== 'ios'
  ? 0 : DeviceInfo.hasNotch()
    ? 44 : 20;

export default function NavigationBar(props) {
  let {
    statusBar, titleView
  } = props;

  const {
    title, hide, leftButton, rightButton, titleLayoutStyle, style
  } = props;

  // status
  statusBar = !statusBar.hidden
    ? (
      <View style={styles.statusBar}>
        <StatusBar {...statusBar} />
      </View>
    ) : null;

  titleView = titleView
    || (
      <Text
        ellipsizeMode="tail"
        numberOfLines={1}
        style={styles.title}
      >
        {title}
      </Text>
    );

  // navigation part
  const content = hide ? null
    : (
      <View style={styles.navBar}>
        {genNavButton(leftButton)}
        <View style={[styles.navBarTitle, titleLayoutStyle]}>
          {titleView}
        </View>
        {genNavButton(rightButton)}
      </View>
    );

  // the whole navigation bar (status + navigation)
  return (
    <View style={[styles.container, style]}>
      {statusBar}
      {content}
    </View>
  );
}

const genNavButton = (item) => (
  <View style={styles.navButton}>
    {item}
  </View>
);

// default props
NavigationBar.defaultProps = {
  statusBar: {
    barStyle: 'light-content',
    hidden: false
  }
};

const styles = StyleSheet.create({
  container: { backgroundColor: colors.secondary },
  statusBar: {
    height: STATUS_BAR_HEIGHT
  },
  navBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: NAVBAR_HEIGHT,
  },
  navButton: {
    alignItems: 'center'
  },
  navBarTitle: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    left: 40,
    right: 40,
    top: 0,
    bottom: 0
  },
  title: {
    fontSize: 18,
    color: 'white'
  }
});
